<script setup lang="ts">
import { ref, watch } from "vue";
import JxudpStationForm from "./jxudp-station-form.vue";
interface IJxudpStationFormDialogProps {
  visible?: boolean;
  stationId?: string;
  superStationId?: string;
  superStationName?: string;
}
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "save-success", data: any, res: any): void; //保存成功回调
}>();

const props = withDefaults(defineProps<IJxudpStationFormDialogProps>(), {
  visible: false
});
const JxudpStationFormRef = ref();
const visibleRef = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleRef.value = val;
  }
);
watch(
  () => visibleRef.value,
  val => {
    emit("update:visible", val);
  }
);

function onOkButtonClick() {
  JxudpStationFormRef.value.save();
}

function onSaveSuccess(data: any, res: any) {
  emit("save-success", data, res);
  visibleRef.value = false;
}
</script>
<template>
  <el-dialog title="岗位管理" destroy-on-close width="40%" v-model="visibleRef">
    <JxudpStationForm
      ref="JxudpStationFormRef"
      :station-id="stationId"
      :super-station-id="superStationId"
      :super-station-name="superStationName"
      @save-success="onSaveSuccess"
    ></JxudpStationForm>
    <template #footer>
      <jxtech-cancel-button @click="visibleRef = false"></jxtech-cancel-button>
      <jxtech-ok-button @click="onOkButtonClick" v-auth="'org:xtpz:cdgl:save'"> </jxtech-ok-button>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss"></style>
